<!DOCTYPE html>
<html lang="en">

<head>
  <meta charset="UTF-8">
  <meta http-equiv="X-UA-Compatible" content="IE=edge">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>Document</title>
</head>

<body>
  <script src="https://unpkg.com/react@16/umd/react.development.js" crossorigin></script>
  <script src="https://unpkg.com/react-dom@16/umd/react-dom.development.js" crossorigin></script>
  <script src="https://unpkg.com/babel-standalone@6/babel.min.js"></script>
  <div id="root"></div>
  <script type="text/babel">
    //react 类式组件state的使用
    class Home extends React.Component {
      constructor(props) {
        super(props)
        //state 数据 类似vue的data
        this.state = {
          msg: "明天星期三",
          list: [
            { name: "吃饭睡觉", week: "周一" },
            { name: "放风", week: "周二" },
            { name: "上网课", week: "周三" }
          ]
        }
        // 改变函数中的this指向
        this.changeM = this.changeM.bind(this)
      }
      // react 类式组件的生命周期
      // componentWillMount() { //react组件挂载前
      //   console.log("组件挂载前")
      // }
      componentDidMount() {  //react组件的挂载后 和vue的mounted()
        console.log("组件挂载后")
      }

      shouldComponentUpdate() { //组件更新前
        console.log("组件更新前")
      }

      getSnapshotBeforeUpdate() { //react组件挂载前
        //在最近一次渲染输出（提交到 DOM 节点）之前调用。
        // 它使得组件能在发生更改之前从 DOM 中捕获一些信息（例如，滚动位置）。
        // 此生命周期的任何返回值将作为参数传递给 componentDidUpdate()。

      }
      componentDidUpdate() {//会在更新后会被立即调用。首次渲染不会执行此方法。
        console.log("组件更新后")
      }
      componentWillUnmount() { //react组件会在组件卸载及销毁之前直接调用
        console.log("组件卸载前")
      }

      // 改变state中的数据
      changeMsg(sta) {
        // class组件的改变数据 setState() 
        this.setState({
          msg: sta
        })
      }
      changeM(sa) {
        console.log(sa)
        this.setState({
          msg: "后天星期四"
        })
      }
      deleteRow(id, e) {
        console.log(id)
        console.log(e)//事件对象
        e.target.style.background = "red";
      }
      render() { //组件渲染中
        return (
          <div>
            <h1 onClick={this.changeMsg.bind(this, '哈哈哈哈')}>{this.state.msg}</h1>
            <h1 onClick={this.changeM}>{this.state.msg}</h1>
            <h1 onClick={(e) => this.deleteRow('8888', e)}>事件对象传递</h1>
            <ul>
              {
                this.state.list.map((item, index) => {
                  return <li key={index}><span>{item.week}</span>------ <span>{item.name}</span> </li>
                })
              }
            </ul>
          </div>
        )
      }
    }
    ReactDOM.render(<Home />, document.getElementById("root"))


  </script>
</body>

</html>